<!-- 登录 -->
<template>
  <div class="login">
    <div class="bg"></div>
    <Container class="login-wrapper">
      <Row>
        <Col offset="1" span="10">
          <Paper class="login-inner-wrapper" z-depth="4" :round="true">
            <TextField v-model="userName" label="用户名" :error-text="userNameError" @change="userNameChange" full-width label-float></TextField>
            <TextField v-model="passWord" label="密码" :error-text="passWordError" @change="passWordChange" full-width label-float :action-icon="passwordVisible ? 'visibility_off' : 'visibility'" :action-click="()=>{passwordVisible=!passwordVisible}" :type="passwordVisible ? 'text' : 'password'"></TextField>
            <Button @click="userLogin" color="primary" full-width>登录</Button>
          </Paper>
        </Col>
      </Row>
    </Container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Container, Row, Col } from "@/components/Grid";
import TextField from "@/components/TextField";
import Paper from "@/components/Paper";
import Button from "@/components/Button";
@Component({
  components: {
    Container,
    Row,
    Col,
    TextField,
    Paper,
    Button
  }
})

export default class Login extends Vue {
  userName = "";
  userNameError = "";
  passWord = "";
  passWordError = "";
  passwordVisible = false;

  userLogin () {
    this.$router.push({path: '/home'})
  }

  passWordChange (value) {
    console.log(value)
    if (!value || value && !value.trim()) {
      this.passWordError = "请输入密码";
    }
  }

  userNameChange (value) {
    if (!value || value && !value.trim()) {
      this.userNameError = "用户名为6-12长度的字符";
    }
  }

}
</script>

<style lang="less">
  .login{
    .login-inner-wrapper{
      padding: 0px 15px 30px 15px;
      background-color: #ffffff00;
    }
    .login-wrapper{
      margin-top: 80px;
    }
    .bg{
      background-size: cover;
      background: url("../../../public/img/login/bg.jpg") 50% no-repeat;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
</style>
